<template>
	<view class="repair_box">
		<view class="goods_list_box w100 flexjus" v-for="(item,index) in goods" :key="index">
			<view class="flex">
				<view class="left_goods_img">
					<image class="w100 h100" :src="item.image_src" mode=""></image>
				</view>
				<view class="left_goods_name family f500 s26">
					{{item.title}}
				</view>
			</view>
			<view class="right_price">
				<view class="top_price_txt s32 f500 family">
					<text class="s24">￥</text>{{item.price}}
				</view>
				<view class="bottom_number_txt s22 family f500 txtali">
					共{{item.number}}件
				</view>
			</view>
		</view>
		<view class="state_box">
			<view class="top_box w100 flexjus">
				<view class="left_box s30 familytow fblod">
					申请类型
				</view>
				<view class="right_box flex">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="content">
						<view class="uni-input s26 family f500">{{array[index].content}}</view>
					</picker>
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="top_box w100 flexjus" style="border: none; margin-top:6upx;">
				<view class="left_box s30 familytow fblod">
					换货原因
				</view>
				<view class="right_box flex">
					<picker @change="bindPickerChange" :value="index1" :range="array1" range-key="content">
						<view class="uni-input s26 family f500">{{array1[index1].content}}</view>
					</picker>
					<view class="right_icon"></view>
				</view>
			</view>
			<!-- <view class="top_box w100 flexjus" style="border: none; margin-top:6upx;">
				<view class="left_box s30 familytow fblod">
					换货商品
				</view>
				<view class="right_box flex">
					<picker @change="bindPickerChange" :value="index" :range="array2">
						<view class="uni-input s26 family f500">{{array2[index2]}}</view>
					</picker>
					<view class="right_icon"></view>
				</view>
			</view> -->
		</view>
		<view class="pingzheng_box">
			<input class="search_box s24 family f500" v-model="iptVal" placeholder="请描述申请换货服务的具体原因" />
			<view class="flex" style="flex-wrap: wrap;">
				<view class="upload_box" style="margin-right: 10upx;" v-for="(item,index) in imgList" :key="index">
					<image class="w100 h100" style="border-radius: 8upx;" :src="item" mode=""></image>
				</view>
				<view class="upload_box" @click="uploadImg">
					<view class="upload_icon"></view>
					<view class="upload_txt s20 family f500 txtali">
						上传凭证
					</view>
				</view>
			</view>
		</view>
		<view class="address_box flexjus" @click="goAddress">
			<view>
				<view class="flex">
					<view class="address_icon"></view>
					<view class="user_info_box flex">
						<view class="user_name s28 family f500">
							{{addressData.name || defaultAddress.name}}
						</view>
						<view class="user_phone s28 family f500">
							{{addressData.mobile || defaultAddress.mobile}}
						</view>
					</view>
				</view>
				<view class="address_detail_box s22 family f500">
					{{addressData.province || defaultAddress.province}} {{addressData.city || defaultAddress.city}}
					{{addressData.district || defaultAddress.district}} {{addressData.address || defaultAddress.address}}
				</view>
			</view>
			<view class="right_icon_bot">

			</view>
		</view>
		<view class="submit_btn s28 fblod familytow txtali" @click="submitData">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: [],
				array1: [],
				index: 0,
				index1: 0,
				goods: [],
				iptVal: '',
				imgList: [],
				addressData: {},
				defaultAddress: {}
			}
		},
		onLoad(options) {
			this.goods = JSON.parse(options.data);
			this.getRepair();
			this.getRepair1();
			this.getAddres();
		},
		methods: {
			submitData() {
				let list = []
				this.goods.map((item,index) => {
					list.push(item.id)
				})
				this.$request({
					url: 'refund/add_refund',
					method: 'POST',
					data: {
						order_type: 'goods',
						goods: list.join(','),
						order_id: this.goods[0].order_id,
						money: 0,
						images: this.imgList.join(','),
						refund_content: this.iptVal,
						opre_type: 1,
						opre_reason: this.array[this.index]?this.array[this.index].content:'',
						opre_method: this.array1[this.index1]?this.array1[this.index1].content : '',
						address_id: this.addressData.id || this.defaultAddress.id,
					}
				}).then(res => {
					if(res.data.code == 1) {
						uni.navigateTo({
							url: './submit_data'
						})
					}else {
						this.$wanlshop.msg(res.data.msg)
					}
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '/pages/filePages/addres/addres?source=3'
				})
			},
			getAddres() {
				this.$request({
					url: 'common/getAddress',
					method: 'POST'
				}).then(res => {
					this.defaultAddress = res.data.data.address
				})
			},
			uploadImg() {
				this.$upLoadImage().then(res => {
					this.imgList.push(res.fullurl)
				})
			},
			refreshList(data) {
				this.addressData = data
			},
			getRepair() {
				this.$request({
					url: 'refund/config_info',
					method: 'POST',
					data: {	
						type: 3
					}
				}).then(res => {
					this.array = res.data.data
				})
			},
			getRepair1() {
				this.$request({
					url: 'refund/config_info',
					method: 'POST',
					data: {
						type: 4
					}
				}).then(res => {
					this.array1 = res.data.data
				})
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
		}
	}
</script>

<style scoped lang="scss">
	.repair_box {
		overflow: hidden;

		.submit_btn {
			width: 686upx;
			height: 88upx;
			background: #EBBE87;
			border-radius: 50upx;
			line-height: 88upx;
			color: #FFFFFF;
			position: absolute;
			bottom: 70upx;
			left: 36upx;
		}

		.address_box {
			width: 686upx;
			height: 164upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: 20upx auto;
			padding: 30upx 20upx 26upx 32upx;
			box-sizing: border-box;

			.right_icon_bot {
				width: 20upx;
				height: 30upx;
				background-image: url('');
				background-size: 100% 100%;
				margin-top: 38upx;
			}

			.address_detail_box {
				width: 408upx;
				color: #666666;
				line-height: 26upx;
				margin-left: 48upx;
				margin-top: 8upx;
			}

			.address_icon {
				width: 40upx;
				height: 40upx;
				background-image: url('');
				background-size: 100% 100%;
			}

			.user_info_box {
				margin-left: 8upx;

				.user_name {
					color: #000;
				}

				.user_phone {
					color: #000;
					margin-left: 20upx;
				}
			}
		}

		.pingzheng_box {
			width: 686upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: 20upx auto;
			padding: 26upx 32upx 20upx 32upx;
			box-sizing: border-box;

			.search_box {
				width: 622upx;
				height: 70upx;
				background: #F4F4F4;
				border-radius: 8upx;
				margin: 0 auto;
				color: #999;
				padding-left: 16upx;
				box-sizing: border-box;
			}

			.upload_box {
				width: 150upx;
				height: 138upx;
				border-radius: 8upx;
				border: 2upx solid #E4E4E4;
				margin-top: 20upx;

				.upload_icon {
					width: 56upx;
					height: 46upx;
					background-image: url('');
					background-size: 100% 100%;
					margin-top: 32upx;
					margin-left: 46upx;
				}

				.upload_txt {
					color: #999;
					margin-top: 10upx;
				}
			}
		}

		.state_box {
			width: 686upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: 20upx auto;
			padding: 22upx 32upx 22upx 32upx;
			box-sizing: border-box;

			.top_box {
				height: 64upx;
				border-bottom: 2upx solid #F4F4F4;

				.left_box {
					color: #000;
					line-height: 64upx;
				}

				.right_box {
					.uni-input {
						color: #666666;
						line-height: 64upx;
					}

					.right_icon {
						width: 16upx;
						height: 26upx;
						background-image: url('');
						background-size: 100% 100%;
						margin-top: 16upx;
						margin-left: 8upx;
					}
				}
			}
		}

		.goods_list_box {
			height: 184upx;
			background-color: #FFFFFF;
			padding-left: 32upx;
			padding-right: 32upx;
			box-sizing: border-box;

			.left_goods_img {
				width: 88upx;
				height: 88upx;
				background: #454545;
				border-radius: 8upx;
				margin-top: 56upx;
			}

			.left_goods_name {
				width: 356upx;
				height: 72upx;
				color: #333333;
				margin-left: 26upx;
				margin-top: 64upx;
				letter-spacing: 0;
				overflow: hidden;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.right_price {
				margin-top: 64upx;

				.top_price_txt {
					color: #000000;
				}

				.bottom_number_txt {
					color: #666666;
				}
			}
		}
	}
</style>
<style>
	page {
		background-color: #F4F4F4;
	}
</style>
